<template>
  <div class="app-container">
    <!--查询条件区域-->
    <el-card>
      <div class="main-title">菜单管理</div>
      <div class="search-card">
        <div class="search-form">
          <el-form :model="searchForm">
            <div class="search-form-item">
              <el-button type="primary" icon="el-icon-plus" size="medium" @click="linkTo('add', -1)">新增</el-button>
            </div>
            <el-divider class="mr-20" direction="vertical" />
            <div class="search-form-item">
              <i class="el-icon-search" />
              <span>查询：</span>
            </div>
            <div class="search-form-item">
              <el-input v-model="searchForm.name" placeholder="请填写"></el-input>
            </div>
            <div class="search-form-item">
              <el-select v-model="searchForm.isShow" placeholder="请选择" @change="selectChange">
                <el-option value="0" label="菜单"></el-option>
                <el-option value="1" label="按钮"></el-option>
              </el-select>
            </div>
            <div class="search-form-item">
              <el-button size="medium" type="primary" @click="getSysMenuTree">查询</el-button>
              <el-button size="medium" @click="resetForm">清空</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <el-table :data="tableData" row-key="id" :tree-props="tableTreeProps" class="table-area" :header-cell-style="headerRowStyle" size="medium">
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column prop="path" label="链接" align="center"></el-table-column>
        <el-table-column prop="hidden" label="类型" align="center">
          <template slot-scope="scope">
            {{scope.row.hidden === 0 ? '菜单' : '按钮'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini"  @click="linkTo('add', scope.row.parentIds + ',' + scope.row.id)">
              <img src="../../../assets/add_condition.png" alt="">
            </el-button>
            <el-button type="text" size="mini"  @click="linkTo('update', scope.row.id)">
              <img src="../../../assets/edit-hover.png" alt="">
            </el-button>
            <el-button type="text" size="mini"  @click="deleteRow(scope.row.id)">
              <img src="../../../assets/delete-hover.png" alt="">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { getMenuTree, deleteMenu } from '@/api/sysSettings/menu'


export default {
  name: 'index',
  created () {
   this.getSysMenuTree()
  },
  data () {
    return {
      listLoading: false, // 列表区域加载中
      // 查询参数
      searchForm: {
        name: '', // 菜单名
        isShow:'' // 菜单状态
      },
      tableData: [], // 表格数据
      // 树形表格配置项
      tableTreeProps: {
        children: 'children'
      },
      // 表头行样式
      headerRowStyle () {
        return 'background-color: #f5f7fa;color: #606266'
      }
    }
  },
  methods: {
    // 获取菜单列表
    getSysMenuTree () {
      let param = this.searchForm
      this.listLoading = true
      getMenuTree(param).then(response => {
        let data = response.object
        this.tableData = data
      }).catch(error => {
        this.listLoading = false
        Message({
          message: error.message,
          type: 'error'
        })
      })
    },
    // 下拉选择框改变
    selectChange (val) {
      this.searchForm.isShow = val
    },
    // 重置表单
    resetForm () {
      this.searchForm = {}
      this.getSysMenuTree()
    },
    // 跳转
    linkTo (type, id) {
      this.$router.push('/system/menuManagement/' + type + '/' + id)
    },
    // 删除菜单
    deleteRow (id) {
      this.$confirm('确定要删除吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
          ids: id
        }
        deleteMenu(param).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getSysMenuTree()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn-group {
    padding: 16px 20px;
  }
  .table-area {
    padding: 0 20px;
  }
  .product-status {
    width: 58px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    background: #f2fff7;
    border: 1px solid #1eb955;
    color: #1eb955;
  }
  .product-status.active {
    background: #f3f3f3;
    border: 1px solid #999;
    color: #999;
  }

  // 查询区域
  .search-card {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    background-color: #FFF;
    .query-text {
      width: 80px;
    }
    .search-form {
      .search-form-item {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 6px;
      }
    }
  }
</style>
